<template>
	<view class="page" :class="getThemeClass">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
				 :data-current="index" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			<block v-for="(item,index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<!-- <view class="item-title">
								<text>{{item.name}}</text>
							</view> -->
							<view class="item-container">
								<view :class="item1.flag ? 'active':''" class="thumb-box" @click="Annoying(item1.id,item1.name,index1,index,item1)" v-for="(item1, index1) in item.tags" :key="index1" :style="{ backgroundImage: 'url(' + item1.pic + ')' }">
									<view class="item-menu-name" >{{item1.name}}</view>
									<view class="item-menu-name-two">{{item1.spellLabel}}</view>
									<!-- <view class="list_cont_view_bg">
										<image :src="item1.pic" mode="aspectFill"></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
		<view class="flex justify-between align-center endP">
			<view class="tagV flex align-center">
				已选择{{num}}个标签
				<image src="/static/images/img/26.png" style="width:16rpx;height:8rpx;margin-left:4px" mode="aspectFill"></image>
			</view>
			<view class="generate" @click="go">前往生成</view>
		</view>
	</view>
</template>

<script>
import tagData from '@/static/images/tag-generator.json';
console.log(tagData)
export default {
	data() {
		return {
			tabbar: [],
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			num:0
		};
	},
	onLoad(option) {
		// console.log(option.pid);
		this.two_class()
		if(option.pid){
			this.current = option.pid
		}
	},

	methods: {
		two_class(){
			// this.$u.api.two_class({}).then(res=>{
			// 	this.tabbar = res.data.list
			// 	console.log(res,'two_class');
			// })
			this.tabbar = tagData
			this.tabbar.forEach(item=>{
				if(item.tags && item.tags.length >0){
					item.tags.forEach(list=>{
						list.flag = false;
					})
				}
			})
		},
		go(){
			let a = []
			let arr = this.tabbar.map(item => item.tags.filter(list => list.flag)).flat();
			uni.setStorageSync('arr',JSON.stringify(arr));
			uni.navigateTo({
			  url: `/pages/tabbar/bazaar/zyTwo`
			});
		},
		Annoying(id,name,index1,index,item1){
			let that = this
			this.$set(this.tabbar[index].tags, index1,{...this.tabbar[index].tags[index1],flag:!this.tabbar[index].tags[index1].flag})
			// console.log(name);
			// uni.setStorageSync('two_class_id',id);
			// uni.setStorageSync('name',name);
			// uni.switchTab({
			//   url: `/pages/tabbar/bazaar/bazaar-second`
			// });
			// uni.navigateTo({
			// 	url: '/pages/tabbar/bazaar/bazaar-second'
			// })
			
			// uni.navigateTo({
			// 	url: '../../tabbar/bazaar/bazaar-second'
			// })
			that.num = 0
			this.tabbar.forEach(item=>{
				if(item.tags && item.tags.length >0){
					item.tags.forEach(list=>{
						if(list.flag){
							that.num++
						}
					})
				}
			})
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if(index == this.current) return ;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if(this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.' + elClass).fields({size: true},res => {
					// 如果节点尚未生成，res值为null，循环调用执行
					if(!res) {
						setTimeout(() => {
							this.getElRect(elClass);
						}, 10);
						return ;
					}
					this[dataVal] = res.height;
				}).exec();
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.endP{
	position:fixed;
	bottom:0;
	left:0;
	z-index:10;
	background-color:#242424;
	width:100%;
	padding:16rpx 32rpx;
}
.generate{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 33rpx;
	background-color:#caf45c;
	border-radius:20rpx;
	height:88rpx;
	line-height:88rpx;
	width:384rpx;
	text-align:center;
}
.tagV{
	font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 33rpx;
}
.pages-tabbar-bazaar-zy{overflow: hidden;height:100vh;}
.page-black.page{overflow: hidden;height:100vh;padding-bottom:0!important}
		.u-wrap {
			height: calc(100vh);
			/* #ifdef H5 */
			height: calc(100vh - var(--window-top));
			/* #endif */
			display: flex;
			flex-direction: column;
		}
		.u-search-box {
			padding: 18rpx 30rpx;
		}

		.u-search-inner {
			background-color: rgb(234, 234, 234);
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 16rpx;
		}
		.u-search-text {
			font-size: 26rpx;
			color: $u-tips-color;
			margin-left: 10rpx;
		}
		.u-menu-wrap {
			flex: 1;
			display: flex;
			overflow: hidden;
			padding: 0 0 0rpx 0;
			border-top:1px solid rgba(255, 255, 255,.2);
			height:100vh;
			overflow: hidden;
			.u-tab-view {
				width: 200rpx;
				height: auto;
				.u-tab-item {
					width: 200rpx;
					height: 100rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					background: #1E1E1E;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					line-height: 1;
					.u-line-1{
						width: 150rpx;
					}
				}
				.u-tab-item-active {
					position: relative;
					font-size: 24rpx;
					font-weight: 600;
					background: #000000;
				}
				
				.u-tab-item-active::before {
					content: "";
					position: absolute;
					border-left: 8rpx solid #A6F88D;
					border-radius: 5rpx;
					height: 28rpx;
					left: 12rpx;
					top: 39rpx;
					display:none;
				}
				
			}
			.right-box {
				padding: 0 25rpx;
				background-color: #000000;
				.page-view {
					.class-item {
						margin-bottom: 30rpx;
						background-color: #000000;
						border-radius: 8rpx;
						.item-title {
							font-size: 26rpx;
							color: #FFFFFF;
							font-weight: bold;
							padding-left: 36rpx;
							position: relative;
							margin-bottom: 20rpx;
						}
						.item-title::before {
							content: "";
							position: absolute;
							border-left: 8rpx solid #A6F88D;
							border-radius: 5rpx;
							height: 26rpx;
							left: 12rpx;
							top: 6rpx;
						}
						.item-container {
							display: flex;
							flex-wrap: wrap;
							padding-bottom:80px;
							justify-content:space-between;
							.thumb-box.active{
								border:1px solid #cafd5c;
							}
							.thumb-box {
							//	width: 150rpx;
							//	height: 68rpx;
							//	line-height: 68rpx;
								text-align: center;
								border-radius: 10rpx;
							//	margin:0 20rpx 20rpx 0;
								// background-color: #A6F88D;
								white-space: nowrap; /* 设置文本不换行 */
								overflow: hidden; /* 隐藏超出容器的部分 */
								text-overflow: ellipsis; /* 超出部分用省略号表示 */
								background-size: cover;
								background-repeat: no-repeat;
								background-position: center center;
								// position: relative;
								width: 244rpx;
								height: 140rpx;
								background: #1A1A1A;
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								opacity: 1;
								border: 2rpx solid #333333;
								margin-top: 36rpx;
								.item-menu-name {
									font-size: 22rpx;
									color: #FFFFFF;
									// position: absolute;
									// top: 0;
									// left: 20rpx;
									// z-index: 10;
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									line-height: 28rpx;
									width:100%;
									height:70rpx;
									line-height:70rpx;
									background:#1a1a1a;
								}
								.item-menu-name-two{
									font-size: 24rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(255,255,255,0.6);
									line-height: 18rpx;
									width:100%;
									height:70rpx;
									line-height:70rpx;
									background:#313131;
								}
								// .list_cont_view_bg{
								// 	position: absolute;
								// 	top: 0;
								// 	left: 0;
								// 	width: 150rpx;
								// 	height: 68rpx;
								// 	border-radius: 10rpx;
								// 	background-color: #000;
								// 	z-index: 1;
								// 	image{
								// 		opacity:0.6;
								// 		filter: alpha(opacity=60);
								// 		width: 150rpx;
								// 		height: 68rpx;
								// 	}
								// }
							}
							.thumb-box:nth-child(3n){
								margin-right: 0;
							}
						}
					}
				}
			}
		}
</style>